<template>
  <el-container style="padding: 20px; height: 100vh; box-sizing: border-box; background-color: #f5f7fa;">
    <el-col :span="24">
      <!-- 1. 用户统计卡片（美化核心：渐变背景、阴影、数字动效） -->
      <el-row :gutter="24" style="margin-bottom: 24px;">
        <el-col :span="12">
          <el-card
              class="stat-card-active"
              shadow="hover"
              style="height: 120px; border-radius: 12px; overflow: hidden; border: none; transition: all 0.3s ease;"
          >
            <div class="stat-card__inner">
              <div class="stat-card__header">
                <div class="stat-card__title">每月活跃人数</div>
                <el-icon class="stat-card__icon" color="#409eff">
                  <UserFilled/>
                </el-icon>
              </div>
              <div :count-to="activeUsers" :duration="1500" class="stat-card__value">
                {{ activeUsers }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card
              class="stat-card-total"
              shadow="hover"
              style="height: 120px; border-radius: 12px; overflow: hidden; border: none; transition: all 0.3s ease;"
          >
            <div class="stat-card__inner">
              <div class="stat-card__header">
                <div class="stat-card__title">平台总人数</div>
                <el-icon class="stat-card__icon" color="#67c23a">
                  <User/>
                </el-icon>
              </div>
              <div :count-to="totalUsers" :duration="1500" class="stat-card__value">
                {{ totalUsers }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 2. 搜索表单（美化：圆角、间距、按钮样式） -->
      <el-form
          :model="queryParams"
          style="margin-bottom: 24px; padding: 20px; background-color: #fff; border-radius: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);"
      >
        <el-row :gutter="24" align="middle">
          <el-col :span="8">
            <el-form-item class="form-item--custom" label="用户名" label-width="80px">
              <el-input
                  v-model="queryParams.username"
                  class="input--custom"
                  clearable
                  placeholder="请输入用户名"
                  style="border-radius: 6px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="form-item--custom" label="手机号" label-width="80px">
              <el-input
                  v-model="queryParams.phone"
                  class="input--custom"
                  clearable
                  placeholder="请输入手机号"
                  style="border-radius: 6px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="form-actions">
            <el-button
                :icon="Search"
                round
                style="margin-right: 12px; padding: 8px 20px; border-radius: 6px;"
                type="primary"
                @click="handleSearch"
            >
              搜索
            </el-button>
            <el-button
                :icon="Refresh"
                round
                style="padding: 8px 20px; border-radius: 6px;"
                @click="resetSearch"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 3. 操作按钮（美化：按钮分组、间距、hover效果） -->
      <el-row justify="space-between" style="margin-bottom: 16px; align-items: center;">
        <el-col :span="12">
          <div class="button-group">
            <el-button
                :icon="Plus"
                style="margin-right: 12px; padding: 8px 16px; border-radius: 6px;"
                type="primary"
                @click="handleOpenAddUser"
            >
              新增用户
            </el-button>
            <el-button
                :disabled="multipleSelect.length !== 1"
                :icon="Edit"
                style="margin-right: 12px; padding: 8px 16px; border-radius: 6px;"
                type="warning"
                @click="handleOpenEditUser(multipleSelect[0].userId)"
            >
              单个修改
            </el-button>
            <el-button
                :disabled="multipleSelect.length === 0"
                :icon="Delete"
                style="padding: 8px 16px; border-radius: 6px;"
                type="danger"
                @click="handleDeleteUser(null)"
            >
              批量删除
            </el-button>
          </div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button
              :icon="Refresh"
              style="padding: 8px 16px; border-radius: 6px;"
              @click="() => { getUsersList(); getUserStatistics(); }"
          >
            刷新数据
          </el-button>
        </el-col>
      </el-row>

      <!-- 4. 用户表格（美化：圆角、行 hover 效果、表头样式） -->
      <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          loading-text="加载用户数据中..."
          stripe
          :cell-style="{ 'vertical-align': 'middle' }"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ 'background-color': '#f8f9fa', 'font-weight': '500', 'color': '#333' }"
          :row-style="{ 'transition': 'background-color 0.2s ease' }"
          style="width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);"
      >
        <el-table-column align="center" type="selection" width="60"/>
        <el-table-column align="center" label="用户编号" prop="userId" width="110"/>
        <!-- 头像列（美化：头像圆角、悬浮效果） -->
        <el-table-column align="center" label="用户头像" prop="userAvatar" width="130">
          <template #default="{ row }">
            <div class="avatar-container" @click="openAvatarDialog(row.userId, row.userAvatar)">
              <el-avatar
                  :src="row.userAvatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369e2bf42b27b76d0a74366.png'"
                  hover-class="el-avatar--border"
                  size="large"
                  style="cursor: pointer; transition: all 0.3s ease; border: 2px solid #f0f2f5;"
              />
              <div class="avatar-overlay">
                <el-icon color="#fff" size="18">
                  <Edit/>
                </el-icon>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名" prop="username"/>
        <el-table-column align="center" label="手机号" prop="phone"/>
        <el-table-column align="center" label="邮箱" prop="email"/>
        <el-table-column align="center" label="创建时间" prop="createTime" width="180"/>
        <el-table-column align="center" label="修改时间" prop="updateTime" width="180"/>
        <!-- 操作列（美化：按钮间距、图标对齐） -->
        <el-table-column align="center" fixed="right" label="操作" min-width="180">
          <template #default="{ row }">
            <el-button
                :icon="Edit"
                link
                size="small"
                type="primary"
                style="margin-right: 12px;"
                @click="handleOpenEditUser(row.userId)"
            >
              修改
            </el-button>
            <el-button
                :icon="Delete"
                link
                size="small"
                type="danger"
                @click="handleDeleteUser(row.userId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 5. 分页（美化：分页器间距、选中样式） -->
      <el-row justify="end" style="margin-top: 16px;">
        <el-pagination
            v-model:current-page="queryParams.page"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
            background
            layout="sizes, prev, pager, next, ->, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="--el-pagination-active-bg-color: #409eff; --el-pagination-border-radius: 6px;"
        />
      </el-row>
    </el-col>

    <!-- 6. 新增/修改用户弹窗（美化：圆角、表单间距、按钮分组） -->
    <el-dialog
        v-model="userDialogVisible"
        :show-close="true"
        :title="isAddUser ? '新增用户' : '修改用户'"
        :close-on-click-modal="false"
        custom-class="user-dialog"
        style="border-radius: 12px; overflow: hidden;"
        width="600px"
    >
      <el-form
          ref="userFormRef"
          :model="userForm"
          label-width="100px"
          :rules="formRules"
          style="margin-top: 12px;"
      >
        <el-form-item v-if="!isAddUser" class="dialog-form-item" label="用户ID" prop="userId">
          <el-input v-model="userForm.userId" class="dialog-input" disabled placeholder="修改时不可编辑"/>
        </el-form-item>
        <el-form-item class="dialog-form-item" label="用户名" prop="username">
          <el-input
              v-model="userForm.username"
              class="dialog-input"
              maxlength="20"
              placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item class="dialog-form-item" label="密码" prop="password">
          <el-input
              v-model="userForm.password"
              :maxlength="20"
              class="dialog-input"
              placeholder="新增必输，修改时输入则更新密码"
              type="password"
          />
        </el-form-item>
        <el-form-item class="dialog-form-item" label="手机号" prop="phone">
          <el-input
              v-model="userForm.phone"
              class="dialog-input"
              maxlength="11"
              placeholder="请输入手机号"
              @input="formatPhone"
          />
        </el-form-item>
        <el-form-item class="dialog-form-item" label="邮箱" prop="email">
          <el-input
              v-model="userForm.email"
              class="dialog-input"
              maxlength="50"
              placeholder="请输入邮箱"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
              style="margin-right: 12px; padding: 8px 20px; border-radius: 6px;"
              @click="userDialogVisible = false"
          >
            取消
          </el-button>
          <el-button
              style="padding: 8px 20px; border-radius: 6px;"
              type="primary"
              @click="handleSubmitUserForm"
          >
            {{ isAddUser ? '新增' : '修改' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 7. 修改头像弹窗（美化：居中布局、预览区样式） -->
    <el-dialog
        v-model="avatarDialogVisible"
        title="修改用户头像"
        :show-close="true"
        :before-close="handleAvatarDialogClose"
        custom-class="avatar-dialog"
        style="border-radius: 12px; overflow: hidden;"
        width="450px"
    >
      <div class="avatar-upload-container">
        <!-- 头像预览区（美化：边框、背景） -->
        <div class="avatar-preview">
          <el-avatar
              :src="currentAvatarUrl || 'https://cube.elemecdn.com/3/7c/3ea6beec64369e2bf42b27b76d0a74366.png'"
              size="large"
              style="width: 160px; height: 160px; border: 4px solid #f0f2f5; background-color: #f8f9fa;"
          />
        </div>
        <!-- 上传按钮（美化：按钮样式、提示文字） -->
        <div class="upload-btn-wrapper">
          <el-upload
              :before-upload="beforeAvatarUpload"
              :on-change="handleFileChange"
              :show-file-list="false"
              action="#"
              class="avatar-uploader"
          >
            <el-button
                :icon="Upload"
                style="padding: 8px 24px; border-radius: 6px; margin-top: 20px;"
                type="primary"
            >
              选择新头像
            </el-button>
          </el-upload>
          <div class="upload-hint">支持 JPG、PNG 格式，文件大小不超过 2MB</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
              style="margin-right: 12px; padding: 8px 20px; border-radius: 6px;"
              @click="handleAvatarDialogClose"
          >
            取消
          </el-button>
          <el-button
              :disabled="!avatarUploadFile"
              style="padding: 8px 20px; border-radius: 6px;"
              type="primary"
              @click="handleSubmitAvatar"
          >
            确定上传
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import http from "@/request/http.js"; // 替换为项目中axios封装路径
// 导入Element Plus图标
import {Delete, Edit, Plus, Refresh, Search, Upload, User, UserFilled} from "@element-plus/icons-vue";
import {
  ElAvatar,
  ElButton,
  ElCard,
  ElCol,
  ElDialog,
  ElForm,
  ElFormItem,
  ElIcon,
  ElInput,
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElPagination,
  ElRow,
  ElTable,
  ElTableColumn,
  ElUpload
} from "element-plus";

// 1. 基础列表与分页数据
const tableData = ref([]);
const queryParams = ref({
  page: 1,
  pageSize: 10, // 默认页大小调整为10，更符合常规体验
  username: "",
  phone: ""
});
const total = ref(0);
const tableLoading = ref(false);

// 2. 用户统计数据
const activeUsers = ref(0);
const totalUsers = ref(0);

// 3. 新增/修改用户弹窗相关（新增表单校验规则）
const userDialogVisible = ref(false);
const isAddUser = ref(false);
const userFormRef = ref(null);
const userForm = ref({
  userId: "",
  username: "",
  password: "",
  phone: "",
  email: "",
  userAvatar: ""
});
// 表单校验规则（增强体验：避免无效提交）
const formRules = ref({
  username: [
    {required: true, message: "请输入用户名", trigger: "blur"},
    {min: 2, max: 20, message: "用户名长度需在2-20之间", trigger: "blur"}
  ],
  password: [
    {required: isAddUser.value, message: "新增必输密码", trigger: "blur"},
    {min: 1, max: 200, message: "密码", trigger: "blur"}
  ],
  phone: [
    {required: true, message: "请输入手机号", trigger: "blur"},
    {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式", trigger: "blur"}
  ],
  email: [
    {required: true, message: "请输入邮箱", trigger: "blur"},
    {pattern: /^[\w.-]+@[a-zA-Z0-9-]+\.[a-zA-Z]+$/, message: "请输入正确的邮箱格式", trigger: "blur"}
  ],
  userId: [
    {required: !isAddUser.value, message: "用户ID不能为空", trigger: "blur"}
  ]
});

// 监听isAddUser变化，动态更新密码校验规则（新增必输，修改可选）
watch(isAddUser, (newVal) => {
  formRules.value.password[0].required = newVal;
  if (userFormRef.value) {
    userFormRef.value.clearValidate("password"); // 清除原有校验状态
  }
});

// 4. 头像修改弹窗相关
const avatarDialogVisible = ref(false);
const currentUserId = ref(null);
const currentAvatarUrl = ref("");
const avatarUploadFile = ref(null);

// 5. 批量选择相关
const multipleSelect = ref([]);

// ------------------------------ 工具方法 ------------------------------
// 手机号格式处理（只允许输入数字，限制11位）
const formatPhone = (val) => {
  userForm.value.phone = val.replace(/[^\d]/g, "").slice(0, 11);
};

// ------------------------------ 基础方法 ------------------------------
// 获取用户列表
const getUsersList = async () => {
  tableLoading.value = true;
  try {
    const urlParams = new URLSearchParams(queryParams.value);
    const res = await http.get(`/admin/user/getUserList?${urlParams.toString()}`);
    if (res.code === 0) {
      tableData.value = res.data.records;
      total.value = res.data.total;
    } else {
      ElMessage.error("获取用户列表失败：" + res.message);
    }
  } catch (error) {
    ElMessage.error("获取用户列表异常：" + (error.message || "网络错误"));
  } finally {
    tableLoading.value = false;
  }
};

// 获取用户统计数据
const getUserStatistics = async () => {
  try {
    const activeRes = await http.get("/admin/user/active-users");
    if (activeRes.code === 0) activeUsers.value = activeRes.data;

    const totalRes = await http.get("/admin/user/total-users");
    if (totalRes.code === 0) totalUsers.value = totalRes.data;
  } catch (error) {
    ElMessage.error("获取统计数据失败：" + (error.message || "网络错误"));
  }
};

onMounted(async () => {
  await Promise.all([getUsersList(), getUserStatistics()]);
});

// ------------------------------ 分页与搜索 ------------------------------
const handleSizeChange = (size) => {
  queryParams.value.pageSize = size;
  getUsersList();
};

const handleCurrentChange = (page) => {
  queryParams.value.page = page;
  getUsersList();
};

const handleSearch = () => {
  queryParams.value.page = 1;
  getUsersList();
};

const resetSearch = () => {
  queryParams.value.username = "";
  queryParams.value.phone = "";
  getUsersList();
};

// ------------------------------ 用户新增/修改 ------------------------------
const resetUserForm = () => {
  userForm.value = {
    userId: "",
    username: "",
    password: "",
    phone: "",
    email: "",
    userAvatar: ""
  };
  if (userFormRef.value) userFormRef.value.resetFields();
};

const handleOpenAddUser = () => {
  resetUserForm();
  isAddUser.value = true;
  userDialogVisible.value = true;
};

const handleOpenEditUser = async (userId) => {
  try {
    const res = await http.get(`/admin/user/${userId}`);
    if (res.code === 0) {
      userForm.value = {...res.data};
      isAddUser.value = false;
      userDialogVisible.value = true;
    } else {
      ElMessage.error("获取用户详情失败：" + res.message);
    }
  } catch (error) {
    ElMessage.error("获取用户详情异常：" + (error.message || "网络错误"));
  }
};

const handleSubmitUserForm = async () => {
  try {
    if (!userFormRef.value) return;
    await userFormRef.value.validate();

    // 深拷贝表单数据，避免修改原对象
    const formData = {...userForm.value};
    // 修改用户时，空密码不传递（后端保持原密码）
    if (!isAddUser.value && !formData.password) {
      delete formData.password;
    }

    const apiUrl = isAddUser.value ? "/admin/user/add" : "/admin/user/update";
    const res = isAddUser.value
        ? await http.post(apiUrl, formData) // 提交处理后的formData
        : await http.put(apiUrl, formData);

    if (res.code === 0) {
      ElMessage.success(isAddUser.value ? "新增用户成功" : "修改用户成功");
      userDialogVisible.value = false;
      // 同步刷新列表和统计数据
      await Promise.all([getUsersList(), getUserStatistics()]);
    } else {
      ElMessage.error((isAddUser.value ? "新增" : "修改") + "用户失败：" + res.message);
    }
  } catch (error) {
    if (!error?.message?.includes("Validation failed")) {
      ElMessage.error((isAddUser.value ? "新增" : "修改") + "用户异常：" + (error.message || "网络错误"));
    }
  }
};

// ------------------------------ 用户删除 ------------------------------
const handleDeleteUser = async (userId) => {
  const deleteIds = userId
      ? [userId]
      : multipleSelect.value.map(item => item.userId);

  if (deleteIds.length === 0) {
    ElMessage.warning("请选择要删除的用户");
    return;
  }

  try {
    await ElMessageBox.confirm(
        `确定删除选中的 ${deleteIds.length} 个用户？删除后不可恢复！`,
        "警告",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "danger",
          confirmButtonClass: "el-button--danger",
          cancelButtonClass: "el-button--default"
        }
    );

    const deletePromises = deleteIds.map(id =>
        http.delete(`/admin/user/delete?userId=${id}`)
    );
    const results = await Promise.all(deletePromises);
    const allSuccess = results.every(res => res.code === 0);

    if (allSuccess) {
      ElMessage.success(`成功删除 ${deleteIds.length} 个用户`);
      // 同步刷新列表和统计数据
      await Promise.all([getUsersList(), getUserStatistics()]);
      multipleSelect.value = [];
    } else {
      ElMessage.error("部分用户删除失败，请重试");
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败：" + (error.message || "网络异常"));
    }
  }
};

// ------------------------------ 头像修改 ------------------------------
const openAvatarDialog = (userId, currentAvatar) => {
  currentUserId.value = userId;
  currentAvatarUrl.value = currentAvatar;
  avatarUploadFile.value = null; // 重置上传文件
  avatarDialogVisible.value = true;
};

const handleAvatarDialogClose = () => {
  avatarDialogVisible.value = false;
};

const handleFileChange = (uploadFile) => {
  if (!beforeAvatarUpload(uploadFile.raw)) return;
  avatarUploadFile.value = uploadFile.raw;
  // 预览选中的头像（即时反馈）
  currentAvatarUrl.value = URL.createObjectURL(uploadFile.raw);
};

const beforeAvatarUpload = (file) => {
  const isImage = file.type === "image/jpeg" || file.type === "image/png";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error("请选择 JPG 或 PNG 格式的图片");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过 2MB");
    return false;
  }
  return true;
};

const handleSubmitAvatar = async () => {
  if (!currentUserId.value || !avatarUploadFile.value) {
    ElMessage.warning("请先选择要上传的头像图片");
    return;
  }

  const loading = ElLoading.service({text: "正在上传头像...", lock: true});

  try {
    const formData = new FormData();
    formData.append("userAvatar", avatarUploadFile.value);

    const res = await http.patch(
        `/admin/user/updateUserAvatar/${currentUserId.value}`,
        formData,
        {headers: {"Content-Type": "multipart/form-data"}}
    );

    if (res.code === 0) {
      ElMessage.success("头像修改成功");
      avatarDialogVisible.value = false;
      getUsersList(); // 刷新列表显示新头像
    } else {
      ElMessage.error("头像修改失败：" + (res.message || "接口异常"));
    }
  } catch (error) {
    ElMessage.error("头像上传异常：" + (error.message || "网络错误"));
  } finally {
    loading.close();
    // 释放URL对象，避免内存泄漏
    if (currentAvatarUrl.value.startsWith("blob:")) {
      URL.revokeObjectURL(currentAvatarUrl.value);
    }
  }
};

const handleSelectionChange = (val) => {
  multipleSelect.value = val;
};
</script>

<style scoped>
/* 全局样式：统一字体、间距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", "Inter", sans-serif;
}

/* 1. 统计卡片美化 */
.stat-card-active {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
}

.stat-card-total {
  background: linear-gradient(135deg, #f0f9eb 0%, #f7fff7 100%);
}

.stat-card__inner {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card__title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.stat-card__icon {
  font-size: 24px;
}

.stat-card__value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-top: 8px;
  transition: all 0.3s ease;
}

/* 统计卡片hover效果 */
.el-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
}

/* 2. 搜索表单美化 */
.form-item--custom {
  margin-bottom: 0;
}

.input--custom {
  height: 40px;
  border-color: #e5e7eb;
  transition: all 0.2s ease;
}

.input--custom:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-actions {
  display: flex;
  justify-content: flex-start;
}

/* 3. 按钮组美化 */
.button-group .el-button {
  transition: all 0.2s ease;
}

.button-group .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

/* 4. 表格美化 */
.el-table {
  border-top: 1px solid #e5e7eb;
}

.el-table__row:hover {
  background-color: #f9fafb !important;
}

.el-table__header th {
  border-bottom: 1px solid #e5e7eb !important;
}

.el-table__body td {
  border-bottom: 1px solid #f3f4f6 !important;
}

/* 5. 头像列美化 */
.avatar-container {
  position: relative;
  display: inline-block;
}

.avatar-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:hover .avatar-overlay {
  opacity: 1;
}

/* 6. 弹窗美化 */
.user-dialog, .avatar-dialog {
  border-radius: 12px !important;
  overflow: hidden;
}

.el-dialog__header {
  background-color: #f8f9fa;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.el-dialog__body {
  padding: 24px;
}

.dialog-form-item {
  margin-bottom: 20px;
}

.dialog-input {
  height: 40px;
  border-color: #e5e7eb;
}

.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer .el-button {
  transition: all 0.2s ease;
}

.dialog-footer .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

/* 7. 头像上传弹窗美化 */
.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-preview {
  margin-bottom: 16px;
}

.upload-hint {
  margin-top: 12px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* 8. 分页器美化 */
.el-pagination .el-pager li.active {
  background-color: #409eff !important;
  color: #fff !important;
  border-radius: 4px !important;
}

.el-pagination .el-pager li:hover {
  color: #409eff !important;
}
</style>
